<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Digital Clock</title>  
<style>  
  body {  
    font-family: Arial, sans-serif;  
    background-color: #008000; /* 近似于图片中的绿色背景 */  
    color: white; /* 文本颜色为白色 */  
    text-align: center;  
    padding-top: 100px; /* 垂直居中，根据实际情况调整 */  
  }  
    
  #clock {  
    font-size: 48px; /* 字体大小，可以根据需要调整 */  
    font-weight: bold;  
  }  
</style>  
</head>  
<body>  
  
<div id="clock"></div>  
  
<script>  
function updateClock() {  
  var now = new Date();  
  var hours = String(now.getHours()).padStart(2, '0');  
  var minutes = String(now.getMinutes()).padStart(2, '0');  
  var seconds = String(now.getSeconds()).padStart(2, '0');  
    
  document.getElementById('clock').textContent = hours + ':' + minutes + ':' + seconds;  
}  
  
// 初始显示时间  
updateClock();  
  
// 每秒更新一次时间  
setInterval(updateClock, 1000);  
</script>  
  
</body>  
</html>